<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="打卡记录" name="first">

      <span>
        <div class="block">
          <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入员工姓名/工号"></el-input>
          <i class="el-icon-search"></i>
          <span class="block">
            <el-date-picker v-model="value2" type="month" placeholder="选择月">
            </el-date-picker>
          </span>
        </div>
      </span>

      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 打卡情况</span>
          <template>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="name" label="工号" width="180">
              </el-table-column>
              <el-table-column prop="address" label="部门">
              </el-table-column>
              <el-table-column prop="gangwei" label="岗位">
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
        <!-- 打卡明细 -->
        <el-tab-pane label="打卡明细">
          <template>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="name" label="工号" width="180">
              </el-table-column>
              <el-table-column prop="address" label="部门">
              </el-table-column>
              <el-table-column prop="" label="岗位">
              </el-table-column>
              <el-table-column prop="" label="上班日期">
              </el-table-column>
              <el-table-column prop="" label="上班时间">
              </el-table-column>
              <el-table-column prop="" label="下班时间">
              </el-table-column>
              <el-table-column prop="" label="操作">

              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>

      </el-tabs>

    </el-tab-pane>
    <!-- 请假记录 -->
    <el-tab-pane label="请假记录" name="second">
      <span>
        <div class="block">
          <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入员工姓名/工号"></el-input>
          <i class="el-icon-search"></i>
          <span class="block">
            <el-date-picker v-model="value2" type="month" placeholder="选择月">
            </el-date-picker>
          </span>
        </div>
      </span>

      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 请假记录</span>
          <template>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="name" label="工号" width="180">
              </el-table-column>
              <el-table-column prop="address" label="岗位">
              </el-table-column>
              <el-table-column prop="" label="请假类型">
              </el-table-column>
              <el-table-column prop="" label="请假开始时间">
              </el-table-column>
              <el-table-column prop="" label="请假结束时间">
              </el-table-column>
              <el-table-column prop="" label="请假天数">
              </el-table-column>
              <el-table-column prop="" label="请假事由">
              </el-table-column>
              <el-table-column prop="" label="备注">
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
      </el-tabs>

    </el-tab-pane>
    <!--月度汇总  -->
    <el-tab-pane label="月度汇总" name="third">
      <span>
        <div class="block">
          <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入员工姓名/工号"></el-input>
          <i class="el-icon-search"></i>
          <span class="block">
            <el-date-picker v-model="value2" type="month" placeholder="选择月">
            </el-date-picker>
          </span>
          
        </div>
      </span>

      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 月度汇总</span>
          <template>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="name" label="工号" width="180">
              </el-table-column>
              <el-table-column prop="address" label="部门">
              </el-table-column>
              <el-table-column prop="" label="岗位">
              </el-table-column>
              <el-table-column prop="" label="应出勤天数">
              </el-table-column>
              <el-table-column prop="" label="实际出勤天数">
              </el-table-column>
              <el-table-column prop="" label="迟到时长">
              </el-table-column>
              <el-table-column prop="" label="迟到次数">
              </el-table-column>
              <el-table-column prop="" label="矿工天数">
              </el-table-column>
              <el-table-column prop="" label="缺卡次数">
              </el-table-column>
              <el-table-column prop="" label="加班时长">
              </el-table-column>
              <el-table-column prop="" label="请假天数">
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'second',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      value2: '',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style></style>
